<template>
  <ul>
    <li
      :class="{ active: checkI == index }"
      v-for="(item, index) in list"
      :key="index"
      @click="cut(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script>
// import bus from '../utils/bus.js';
export default {
  data() {
    return {
      list: ["北京", "郑州", "上海", "深圳"],
      checkI: 0, // 选中的索引
    };
  },
  created() {},
  methods: {
    cut(i){
      this.checkI = i;
      this.$bus.$emit('cut',this.list[i]);
    }
  },
  components: {},
};
</script>

<style lang="scss" scoped>
ul{
  list-style: none;
  display: flex;
  li{
    width: 100px;
    text-align: center;
    cursor: pointer;
  }
}
.active{
  color: red;
}
</style>
